/* 回复弹窗 */
<template>
	<view class="replies fix-screen">
		<view class="container">
			<view class="h3 center">{{total}}条回复</view>
			<u-icon
				class="close-icon"
				name="close"
				@click="$emit('close')"
			/>
			<scroll-view
				class="scroll-view"
				scroll-y
				lower-threshold="150"
				@scrolltolower="loadMoreReplies(pageNum+1)"
			>
				<!-- 评论内容 -->
				<view class="comment">
					<Comment :comment="comment" />
				</view>
				<!-- 一个分割行 -->
				<view class="divider" />
				<!-- 回复列表 -->
				<view class="list">
					<view
						style="margin-bottom: 10px;"
						class="strong"
					>
						全部回复
					</view>
					<view
						class="reply-item"
						v-for="(reply,i) in replies"
						:key="reply.id"
					>
						<Comment
							:showBorder="i !== replies.length-1"
							:comment="reply"
						/>
					</view>
					<aha-loadmore :status="loadStatus" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { getDiscCommentsReply } from '@/api/forum.js'
import Comment from './Comment'

export default {
  components: {
    Comment
  },
  props: {
    comment: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      replies: []
    }
  },
  computed: {
    loadStatus() {
      return this.replies.length >= this.total ? 'nomore' : 'loadmore'
    }
  },
  created() {
    this.getReplies(1)
    uni.$on('updateReply', this.updateReply)
    uni.$on('delReply', this.delReply)
    uni.$on('refreshReplies', () => this.getReplies(1))
  },
  beforeDestroy() {
    uni.$off('updateReply')
    uni.$off('delReply')
    uni.$off('refreshReplies')
  },
  methods: {
    /**
     * 获取评论
     */
    async getReplies(pageNum = this.pageNum) {
      try {
        const res = await getDiscCommentsReply({
          commentId: this.comment.id,
          pageNum,
          pageSize: this.pageSize
        })

        this.pageNum = pageNum
        this.total = res.total
        this.replies = pageNum === 1 ? res.pageData : this.replies.concat(res.pageData)
        console.log(res)
      } catch (err) {
        console.log(err)
      }
    },
    /**
     * 加载更多评论，先判断有没有加载全部
     */
    loadMoreReplies() {
      if (this.replies.length < this.total) {
        this.getReplies(this.pageNum + 1)
      }
    },
    /**
     * 更新单挑评论，直接替换对应的index
     * @param {Object} reply 更新后的reply
     */
    updateReply(reply) {
      const index = this.replies.findIndex(item => item.id === reply.id)

      this.$set(this.replies, index, reply)
    },
    /**
     * 删除某条评论
     */
    delReply(reply) {
      const index = this.replies.findIndex(item => item.id === reply.id)

      this.total--
      this.replies.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.replies {
  z-index: 10;

  .container {
    position: absolute;
    top: 100vh;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px 0;
    background-color: #ffffff;
    border-top-left-radius: $sLarger;
    border-top-right-radius: $sLarger;
    animation: show 0.5s ease forwards;

    .close-icon {
      position: absolute;
      top: 15px;
      right: 20px;
    }

    .scroll-view {
      height: calc(100vh - 34px);
      overflow: auto;

      .comment {
        padding: 10px;
      }

      .divider {
        height: 5px;
        background-color: $white1;
      }

      /* 回复对象 */
      .list {
        padding: 10px;

        .reply-item {
          margin-bottom: 10px;
        }
      }
    }
  }

  @keyframes show {
    to {
      top: 0;
    }
  }
}
</style>
